<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>商品列表</title>
	<link rel="shortcut icon" href="./static/image/favicon.ico">
	<link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/element-ui/2.14.1/theme-chalk/index.min.css">
	<link rel="stylesheet" type="text/css" href="./static/libs/element-ui/index.css">
	<link rel="stylesheet" type="text/css" href="./static/css/public.css">
	<link rel="stylesheet" type="text/css" href="./static/css/m_tailwind.css">
	<style>
		.shop-list-wp {
			position: relative;
			padding: 24px 24px 0;
			height: 100%;
			padding-bottom: 80px;
		}
		.scroll-box {
			height: 100%;
			overflow: auto;
		}
		.t-bottom {
			position: absolute;
			z-index: 10;
			left: 24px;
			right: 24px;
			bottom: 0;
			background: #fff;
		}
		.paging-box {
			text-align: right;
			padding: 24px;
			background: #fff;
		}
		.scroll-bar-box {
			width: 100%;
			overflow-x: auto;
			background: #fff;
		}
		.scroll-bar-box div {
			width: 0;
			height: 1px;
		}

		.row1 {
			margin-top: 8px;
			margin-bottom: 16px;
			display: flex;
			align-items: center;
			padding: 12px 20px;
			background: rgba(0,0,0,.04);
    	border-radius: 6px;
		}
		.row1 .left {
			display: flex;
			align-items: center;
			line-height: 40px;
			margin-left: 8px;
	    font-size: 16px;
	    color: rgba(0,0,0,.8);
	    font-weight: 500;
		}
		.row1 .left img {
			margin-right: 8px;
			width: 20px;
			height: 20px;
		}
		.upload-state {
			display: flex;
			align-items: center;
			color: rgba(0, 0, 0, 0.24);
			font-size: 12px;
		}
		.upload-state:before {
			content: '';
			display: inline-block;
			width: 8px;
			height: 8px;
			border-radius: 50%;
    	margin-right: 8px;
    	background: currentColor;
		}

		
	</style>
</head>
<body>

	<div id="app" v-cloak>
		<m-layout>
			<div class="shop-list-wp">
				<div class="scroll-box">
					<m-tip>为了保护商家原图版权，请及时为您的商品【上传原图】</m-tip>
					<div class="row1">
						<div class="left">
							<img src="./static/image/img16.png"/>
							暂无待办任务
						</div>
					</div>
					<m-search :model="form">
						<el-col :span="12">
							<el-form-item label="商品ID查询" prop="aa">
								<el-input placeholder="请输入内容" v-model="form.aa">
							    <el-select v-model="form.bb" style="width: 100px;" slot="prepend" placeholder="请选择">
							      <el-option v-for="item in id_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
							    </el-select>
							  </el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="货号" prop="cc">
								<el-input placeholder="请输入内容" v-model="form.cc">
							    <el-select v-model="form.dd" style="width: 100px;" slot="prepend" placeholder="请选择">
							      <el-option v-for="item in hh_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
							    </el-select>
							  </el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="商品名称" prop="ee">
								<el-input v-model="form.ee" placeholder="请输入"/>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="商品分类" prop="ff">
								<el-input v-model="form.ff" placeholder="请输入"/>
							</el-form-item>
						</el-col>
						<template slot="hide">
							<el-col :span="6">
								<el-form-item label="是否在售" prop="gg">
									<el-select class="w-full" v-model="form.gg" placeholder="请选择">
								    <el-option v-for="item in yes_or_no" :key="item.value" :label="item.label" :value="item.value"></el-option>
								  </el-select>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="资质上传状态" prop="hh">
									<el-select class="w-full" v-model="form.hh" placeholder="请选择">
								    <el-option v-for="item in zzsczt" :key="item.value" :label="item.label" :value="item.value"></el-option>
								  </el-select>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="是否需要说明书" prop="ii">
									<el-select class="w-full" v-model="form.ii" placeholder="请选择">
								    <el-option v-for="item in yes_or_no" :key="item.value" :label="item.label" :value="item.value"></el-option>
								  </el-select>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="库存" prop="jj">
									<el-input v-model="form.jj" placeholder="请输入"/>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="是否JIT" prop="kk">
									<el-select class="w-full" v-model="form.kk" placeholder="请选择">
								    <el-option v-for="item in yes_or_no" :key="item.value" :label="item.label" :value="item.value"></el-option>
								  </el-select>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="商详上传状态" prop="ll">
									<div class="flex w-full">
										<el-select style="width:50%;" v-model="form.ll" placeholder="请选择">
									    <el-option v-for="item in sclx" :key="item.value" :label="item.label" :value="item.value"></el-option>
									  </el-select>
									  <el-select style="width:50%;" v-model="form.mm" placeholder="请选择">
									    <el-option v-for="item in scjg" :key="item.value" :label="item.label" :value="item.value"></el-option>
									  </el-select>
									</div>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="说明书语言" prop="nn">
									<div class="flex w-full">
										<el-select style="width:100px;" v-model="form.nn" placeholder="请选择">
									    <el-option v-for="item in bh" :key="item.value" :label="item.label" :value="item.value"></el-option>
									  </el-select>
									  <el-select class="w-0 flex-1" v-model="form.oo" placeholder="请选择">
									    <el-option v-for="item in smsyy" :key="item.value" :label="item.label" :value="item.value"></el-option>
									  </el-select>
									</div>
								</el-form-item>
							</el-col>
						</template>
					</m-search>
					<div class="pt-5 pb-5 flex justify-between items-center">
						<div></div>
						<div>
							<el-button type="text" style="color:#0071F3;">商品新建教程</el-button>
							<el-button type="text" style="color:#0071F3;">尺码表维护教程</el-button>
						</div>
					</div>
					<el-table ref="tableRef" class="text-12" size="mini" border :data="tableData" :span-method="objectSpanMethod" style="width: 100%">
						<el-table-column fixed="left" label="商品信息" width="340">
							<template slot-scope="scope">
								<goods-info2 :data="scope.row"></goods-info2>
							</template>
						</el-table-column>
						<el-table-column label="商品属性" width="160">
							<template slot-scope="scope">
								<goods-attribute :data="scope.row"></goods-attribute>
							</template>
						</el-table-column>
						<el-table-column label="尺码表" width="76">
							<template slot-scope="scope">
								<el-link class="text-12 blue-btn" :underline="false">查看</el-link>
							</template>
						</el-table-column>
						<el-table-column label="说明书信息" width="150">
							<template slot-scope="scope">
								<div class="upload-state">未上传</div>
							</template>
						</el-table-column>
						<el-table-column prop="productSkuId" label="商品SKU ID" width="110"></el-table-column>
						<el-table-column label="商品规格" width="160">
							<template slot-scope="scope">
								<div v-for="(item, index) in scope.row.productSkuSpecList" :key="index">{{item.parentSpecName}}：{{item.specName}}</div>
							</template>
						</el-table-column>
						<el-table-column label="库存" width="150">
							<template slot-scope="scope">
								<span>-</span>
							</template>
						</el-table-column>
						<el-table-column prop="aaa" label="商品编码" width="120">
							<template slot-scope="scope">
								<span>-</span>
							</template>
						</el-table-column>
						<el-table-column label="体积重量信息">
							<el-table-column prop="aaa" label="卖家测量" width="200">
								<template slot-scope="scope">
									<div>体积：{{toLm(scope.row.productSkuWhExtAttr.productSkuVolume.len)}}cm*{{toLm(scope.row.productSkuWhExtAttr.productSkuVolume.width)}}cm*{{toLm(scope.row.productSkuWhExtAttr.productSkuVolume.height)}}cm</div>
									<div>重量：{{toKe(scope.row.productSkuWhExtAttr.productSkuWeight.value)}}g</div>
								</template>
							</el-table-column>
							<el-table-column prop="aaa" label="平台测量参考" width="200">
								<template slot-scope="scope">
									<span>-</span>
								</template>
							</el-table-column>
						</el-table-column>
						<el-table-column prop="extCode" label="SKU货号" width="120"></el-table-column>
						<el-table-column label="申报价格(CNY)" width="110">
							<template slot-scope="scope">
								<span>￥{{scope.row.supplierPrice}}</span>
							</template>
						</el-table-column>
						<el-table-column label="销售信息">
							<el-table-column prop="todaySalesVolume" label="今日销量" width="90"></el-table-column>
							<el-table-column prop="todayTodaySales" label="今日合计" width="90"></el-table-column>
							<el-table-column prop="last7DaysSalesVolume" label="7天销量" width="90"></el-table-column>
							<el-table-column label="上架时间" width="90">
								<template slot-scope="scope">
									{{switchTime(scope.row.createdAt, 'yyyy-MM-dd HH:mm:ss')}}
								</template>
							</el-table-column>
						</el-table-column>
						<el-table-column fixed="right" prop="actions" label="操作" width="126">
							<el-link class="text-12 blue-btn" :underline="false">编辑</el-link>
							<el-link class="text-12 blue-btn" :underline="false">维护货号</el-link>
							<el-link class="text-12 blue-btn" :underline="false">上传原图</el-link>
						</el-table-column>
			    </el-table>
				</div>
				<div class="t-bottom">
					<div class="scroll-bar-box" ref="scrollXRef">
						<div></div>
					</div>
					<div class="paging-box">
						<el-pagination
							background
				      @size-change="handleSizeChange"
				      @current-change="handleCurrentChange"
				      :current-page="paging.current"
				      :page-sizes="[10, 20, 30, 40, 100]"
				      :page-size="paging.pageSize"
				      layout="total, sizes, prev, pager, next, jumper"
				      :total="paging.total">
				    </el-pagination>
					</div>
				</div>
			</div>
		</m-layout>
	</div>

	<script src="./static/libs/vue2.6.8/vue.min.js"></script>
	<script src="./static/libs/element-ui/index.min.js"></script>
	<script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script>
	<script src="./static/js/Tools.js"></script>
	<script src="./config/shopList.js"></script>
	<script src="./static/data/shopData.js"></script>
	<script src="./static/components/common.js"></script>
	<script src="./static/image/goodsImg/title.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data() {
				return {
					form: {
						aa: '',
						bb: 'SKC',
						cc: '',
						dd: 'SKU',
						ee: '',
						ff: '',
						gg: '',
						hh: '',
						ii: '',
						jj: '',
						kk: '',
						ll: '',
						mm: '',
						nn: '不包含',
						oo: '',
					},

					// ID类型
					id_type: [
						{label: 'SKC', value: 'SKC'},
						{label: 'SKU', value: 'SKU'},
						{label: 'SPU', value: 'SPU'},
					],
					// 货号类型
					hh_type: [
						{label: 'SKC', value: 'SKC'},
						{label: 'SKU', value: 'SKU'},
					],
					// 是否
					yes_or_no: [
						{label: '是', value: '是'},
						{label: '否', value: '否'},
					],
					// 资质上传状态
					zzsczt: [
						{label: '待上传', value: '待上传'},
						{label: '上传中', value: '上传中'},
						{label: '上传失败', value: '上传失败'},
						{label: '上传成功', value: '上传成功'},
					],
					// 上传类型
					sclx: [
						{label: '主图视频', value: '主图视频'},
						{label: '详情视频', value: '详情视频'},
						{label: '详情图文', value: '详情图文'},
					],
					// 上传结果
					scjg: [
						{label: '有', value: '有'},
						{label: '无', value: '无'},
					],
					// 说明书语言
					smsyy: [
						{label: '中文', value: '中文'},
						{label: '英语', value: '英语'},
						{label: '西班牙语', value: '西班牙语'},
						{label: '德语', value: '德语'},
						{label: '法语', value: '法语'},
						{label: '意大利语', value: '意大利语'},
						{label: '日语', value: '日语'},
						{label: '韩语', value: '韩语'},
						{label: '阿拉伯语', value: '阿拉伯语'},
						{label: '捷克语', value: '捷克语'},
						{label: '瑞典语', value: '瑞典语'},
						{label: '波兰语', value: '波兰语'},
						{label: '荷兰语', value: '荷兰语'},
					],
					// 包含
					bh: [
						{label: '包含', value: '包含'},
						{label: '不包含', value: '不包含'},
					],

					tableData: [],
					paging: {
						current: 1,
						pageSize: 20,
						total: 0
					}
				}
			},
			mounted() {
				this.getTableData();
				setTimeout(() => {
					this.bindScrollX();
				}, 200);

				// this.randomData();
				// this.randomGood();
			},
			methods: {
				switchTime: Tools.switchTime,

				// 生产随机数据
				randomData() {
					let data = shopData.result.pageItems;
					data.forEach(aItem => {
						aItem.productSkuSummaries.forEach(bItem => {
							// 每天
							bItem.todaySalesVolume = parseInt(Math.random()*30);
						})
						// 7天合计
						aItem.last7DaysSalesVolume = parseInt(Math.random()*200+400);
					})

					var blob = new Blob([JSON.stringify(shopData)], {type: "text/plain;charset=utf-8"});
					saveAs(blob, "save.json");
				},

				// 生产随机图片与名字
				randomGood() {
					let aTitle = goodTitles.filter((item, index) => index%2 == 0);
					let aPrice = goodTitles.filter((item, index) => index%2 == 1);
					let data = shopData.result.pageItems;
					data.forEach((aItem, aIndex) => {
						let randIndex = aIndex+1;
						if(aIndex >= aTitle.length) {
							randIndex = Math.ceil(Math.random()*aTitle.length);
						}
						aItem.productName = aTitle[randIndex-1];
						aItem.productSkuSummaries.forEach(bItem => {
							bItem.supplierPrice = (aPrice[randIndex-1]*5.3).toFixed(2);
						})
						let name = randIndex >= 10 ? randIndex : '0'+randIndex;
						aItem.mainImageUrl = `./static/image/goodsImg/${name}.webp`;
					})
					var blob = new Blob([JSON.stringify(shopData)], {type: "text/plain;charset=utf-8"});
					saveAs(blob, "save.json");
				},


				getTableData() {
					let data = shopData.result.pageItems;
					this.paging.total = data.length;
					var list = data.slice((this.paging.current-1)*this.paging.pageSize, this.paging.current*this.paging.pageSize);
					var res = [];
					list.forEach(function (aItem, aIndex) {
						let aRow = aItem.productSkuSummaries;
						let totalScale = 0;
						aRow.forEach(function (bItem) {
							totalScale+=bItem.todaySalesVolume;
						})
						aRow.forEach(function (bItem, bIndex) {
							var obj = {
								productId: aItem.productId,
								productSkcId: aItem.productSkcId,
								productName: aItem.productName,
								leafCat: aItem.leafCat,
								productProperties: aItem.productProperties,
								mainImageUrl: aItem.mainImageUrl,
								createdAt: aItem.createdAt,
								last7DaysSalesVolume: aItem.last7DaysSalesVolume || 0,
								...bItem,
							}
							obj.todaySalesVolume = obj.todaySalesVolume || 0;
							if(bIndex == 0) {
								obj.rows = aRow.length;
								obj.todayTodaySales = totalScale;
							}
							res.push(obj);
						})
					})
					this.tableData = res;
				},

				handleSizeChange(val) {
					this.paging.pageSize = val;
					this.getTableData();
				},

				handleCurrentChange(val) {
					this.paging.current = val;
					this.getTableData();
				},

				bindScrollX() {
					const oHead = this.$refs.tableRef.$el.querySelectorAll('.el-table__header-wrapper')[0];
					const oBody = this.$refs.tableRef.$el.querySelectorAll('.el-table__body-wrapper')[0];
					const oX = this.$refs.scrollXRef;
					const oXDiv = this.$refs.scrollXRef.querySelector('div');
					oXDiv.style.width = oHead.firstChild.clientWidth+28+'px'
					oX.onscroll = () => {
						let left = oX.scrollLeft;
      			oBody.scrollLeft = left;
      			oHead.scrollLeft = left;
					}
				},

				objectSpanMethod(data) {
					if(data.columnIndex < 4 || data.columnIndex >= 13) {
						if(data.row.rows) {
							return {
	              rowspan: data.row.rows,
	              colspan: 1
	            };
						} else {
							return {
	              rowspan: 0,
	              colspan: 0
	            };
						}
					}
				},

				// 转厘米
				toLm(val) {
					let res = val/10;
					if(res > 1) {
						res = parseInt(res);
					} else {
						res = res.toFixed(1);
					}
					return res;
				},

				// 转克
				toKe(val) {
					return parseInt(val/1000);
				},

				getTotalScale(row) {
					// return row.productSkuSummaries.
					return '111';
				}

			}
		})
	</script>
</body>
</html>